<template>
	<view>
		<up-navbar :safeAreaInsetTop="true" :fixed="false" :isBack="false" leftIcon=" " title=" ">
			<!-- <view class="u-flex u-row-right" style="width: 100%;">
				<view class="camera u-flex u-row-center">
					<up-icon name="camera-fill" color="#000000" size="48"></up-icon>
				</view>
			</view> -->
		</up-navbar>
		<view style="display: flex;align-items: center;
		padding: 20rpx;background-color: #fff;">
			<view>
				<up-avatar :src="''" size="80"></up-avatar>
			</view>
			<view style="margin-left: 20rpx;">
				<view class="u-font-18 u-p-b-20">{{store.state.user.nickName}}</view>
				<view class="u-font-14 u-tips-color">账号:{{store.state.user.userName}}</view>
			</view>
			
		</view>

	<!-- 	<view class="u-m-t-20">
			<up-cell-group>
				<up-cell icon="rmb-circle" title="支付"></up-cell>
			</up-cell-group>
		</view>

		<view class="u-m-t-20">
			<up-cell-group>
				<up-cell icon="star" title="收藏"></up-cell>
				<up-cell icon="photo" title="相册"></up-cell>
				<up-cell icon="coupon" title="卡券"></up-cell>
				<up-cell icon="heart" title="关注"></up-cell>
			</up-cell-group>
		</view> -->

		<view class="u-m-t-20">
			<up-cell-group>
				<up-cell @click="logOut" icon="setting" title="退出"></up-cell>
			</up-cell-group>
		</view>
	</view>
</template>

<script setup>
	import { reactive, computed, ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app"
	import { useStore } from "vuex";
	const store = useStore();
	const app = getApp()
	
	// 页面生命周期
	onLoad(() => {
	})
	
	//弹出模态框
	const logOut = () => {
		uni.showModal({
			showCancel: true,
			title: '是否清除所有缓存退出!',
			success: (res) => {
				if (res.confirm) {
					store.commit('RESET_ALL')
					uni.reLaunch({
						url:"/pages/login"
					})
				} else if (res.cancel) {
				}
			}
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #ededed;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}

	.u-cell-group {
		background-color: #fff;
	}
</style>